<template>
	<!-- 生产任务超期看板 -->
	<div style="height:3000px">
		<v-card>
			<v-card-title>
				<v-row class="mt-2">
					<v-col cols="12" md="2">
						<v-text-field label="项目号" v-model="query.projectcode" dense outlined>
						</v-text-field>
					</v-col>
					<v-col cols="12" md="2">
						<v-text-field label="名称" v-model="query.name" dense outlined>
						</v-text-field>
					</v-col>

					<!-- ml-n16 前面加n是间距 -->
					<!-- class="ml-n16 mx-auto" -->
					<v-col cols="12" md="2">
						<v-btn depressed color="primary" @click="loadPages">查询</v-btn>
						<v-btn class="ml-3" depressed color="primary" @click="refreshLoadPages">
							重置</v-btn>
					</v-col>
				</v-row>
			</v-card-title>
			<v-card-text>
					<v-alert text color="blue-grey" class="text-center">标红行表示任务已超期</v-alert>
				<v-data-table :headers="productionOrderHeaderList" :items="productionOrderDataList" small fixed-header
					item-key="id" dense class="text-no-wrap" loading-text="正在加载请稍等......"
					:loading="productionOrderLoading" :options.sync="productionOrderOptions"
					:footer-props="vuetifyDefaultPage" :server-items-length="productionOrderTotalCount">
					<template v-slot:item="{item}">
						<tr :style="item.istaskbeyond==true? 'background-color: #ffd5d5;':''">
							<td class="text-left">{{ item.projectcode }}</td>
							<td class="text-center">{{ item.projectname }}</td>
							<td class="text-center">{{ item.code }}</td>
							<td class="text-center">{{ item.name }}</td>
							<td class="text-center">{{ item.piccode }}</td>
							<td class="text-center">{{ item.totalcount }}</td>
							<td class="text-center">{{ item.completecount }}</td>
							<td class="text-center">{{ item.statusname }}</td>
							<td class="text-center">{{ item.typename }}</td>
							<td class="text-center">{{ item.deliverydate }}</td>
						</tr>
					</template>
				</v-data-table>
			</v-card-text>
		</v-card>
	</div>

</template>

<script>
	import {
		mapActions
	} from 'vuex'
	export default {
		name: 'production_task_beyond',
		components: {},
		data: () => ({
			query: {
				projectcode: '',
				name: '',
			},
			parmaterEnum: ['OrderMomStatus'],
			productionOrderStatusItems: [],
			productionOrderHeaderList: [],
			productionOrderDetailHeaderList: [],
			productionOrderDataList: [],
			productionOrderTotalCount: 0,
			productionOrderLoading: true,
			productionOrderOptions: { //页数
				page: 1,
				//每页行数
				itemsPerPage: 10
			},
			vuetifyDefaultPage: {
				'items-per-page-text': '每页个数',
				'items-per-page-options': [10, 20, 50, 100, 200]
				// 'items-per-page-all-text': '100'
			},

		}),
		watch: {
			productionOrderOptions: {
				handler() {
					this.loadPages()
				},
				deep: true
			},

		},
		created() {
			this.loadproductionOrderHeaderList()
			this.loadEnums()
		},
		methods: {

			refreshLoadPages() {
				this.query.projectcode = ''
				this.query.name = ''

			},
			//加载加工件
			async loadPages() {
				this.productionOrderLoading = true
				var response = await this.$httpRequest({
					url: `MES/MESProductionTaskBeyond/QueryPage?projectcode=${this.query.projectcode}&name=${this.query.name}&pageNumber=${this.productionOrderOptions.page}&pageSize=${this.productionOrderOptions.itemsPerPage}`,
					method: 'get',
				})
				if (response.status == 1) {
					this.productionOrderDataList = response.data.result
					this.productionOrderTotalCount = response.data.pagination.totalRecords
					this.productionOrderLoading = false
				} else {
					this.$message.error(response.info)
				}
			},

			//加工件头信息
			loadproductionOrderHeaderList() {
				this.productionOrderHeaderList = [{
						text: '项目号',
						value: 'projectcode',
						align: 'center',
						filterable: true,
					},
					{
						text: '项目名称',
						value: 'projectname',
						align: 'center',
						filterable: true,
					},
					{
						text: '工单号',
						value: 'code',
						align: 'center',
						filterable: true,
					},
					{
						text: '名称',
						value: 'name',
						align: 'center',
						filterable: true,
					},
					{
						text: '图号',
						value: 'piccode',
						align: 'center',
						filterable: true,
					},
					{
						text: '需求总数',
						value: 'totalcount',
						align: 'center',
						filterable: true,
					},
					{
						text: '已完工数量',
						value: 'completecount',
						align: 'center',
						filterable: true,
					},
					{
						text: '状态',
						value: 'statusname',
						align: 'center',
						filterable: true,
					},
					{
						text: '类型',
						value: 'typename',
						align: 'center',
						filterable: true,
					},
					{
						text: '交期',
						value: 'deliverydate',
						align: 'center',
						filterable: true,
					},


				]


			},

		}

	}
</script>

<style>
</style>
